<template>
	<view class="recommended">
		<u-notice-bar type="error" mode="horizontal" :list="list"></u-notice-bar>
		<view class="card">
			<!-- 图文动态 -->
			<view class="card-item" @click="image">
				<view style="margin-left: 30rpx;">
					<u-icon size="170" name="https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/h_2.png"></u-icon>
				</view>

				<view class="text1" style="margin-left: 25rpx;">发布图文动态
					<view class="text">
						您可以分享自己的日常，记录美好生活
					</view>
				</view> 
			</view>
			<!-- 视频动态 -->
			<view class="card-item" @click="video">
				<view style="margin-left: 30rpx;">
					<u-icon size="150" name="https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/h_3.png"></u-icon>
				</view>

				<view class="text1">
					发布短视频动态
					<view class="text">
						您可以上传自己的短视频作品，来提高自己的吸引力
					</view>
				</view>
			</view>
			<!-- 作品投稿 -->
			<view class="card-item" @click="addMsg">
				<view style="margin-left: 30rpx;">
					<u-icon size="150" name="https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/h_1.png"></u-icon>
				</view>
			
				<view class="text1">
					作品投稿
					<view class="text">
						您可以投稿自己的作品，来增加作品关注度
					</view>
				</view>
			</view>
		</view>
		
		<f-popup ref="popup">
			<view class="position-absolute bottom-0 left-0 right-0 bg-white animated faster fadeIn">
				<view class="flex" style="height: 200rpx;">
					<view class="flex-1 flex align-center justify-center flex-column" hover-class="bg-light" @click="uploadworks('create')">
						<text class="iconfont icon-wenjian flex align-center justify-center text-white bg-primary rounded-circle" style="width: 80rpx;height: 80rpx;"></text>
						<text class="font mt-1 text-muted">单集</text>
					</view>
					<view class="flex-1 flex align-center justify-center flex-column" hover-class="bg-light"  @click="uploadworks('create')">
						<text class="iconfont icon-wenjianjia flex align-center justify-center text-white bg-main rounded-circle" style="width: 80rpx;height: 80rpx;"></text>
						<text class="font mt-1 text-muted">连载</text>
					</view>
				</view>
				<view class="f-divider"></view>
				<view class="py-2 flex align-center justify-center font-md text-muted" hover-class="bg-light" @click.stop="hidePopup">取消</view>
			</view>
		</f-popup>
	</view>
</template>

<script>
	import fPopup from '@/components/free-ui/f-popup.vue';
	import { checkLogin } from '@/utils/wxConfig.js'
	export default {
		components: {
			fPopup
		},
		data() {
			return {
				list:[
					'严禁发布违法违规内容！！！否则将追究法律责任！！！'
				]			
			}
		},
		methods: {
			//发布图文动态
			image(){
				if (!checkLogin()) return
				uni.navigateTo({
					url:"/pages/post/add?type=image"
				})
			},
			//发布短视频动态
			video(){
				if (!checkLogin()) return
				uni.navigateTo({
					url:'/pages/post/add?type=video'
				})
			},
			//作品投稿
			uploadworks(path){
				if (!checkLogin()) return
				uni.navigateTo({
					url: '/pages/'+'publish'+'/'+path,
				})
			},
			// 选择投稿类型
			addMsg(){
				this.$refs.popup.show()
			},
			hidePopup(){
				this.$refs.popup.hide()
			},
		}
	}
</script>

<style lang="scss" scoped>
@keyframes fade-in {
		0% {
			opacity: 0;
		}

		/*初始状态 透明度为0*/
		40% {
			opacity: 0;
		}

		/*过渡状态 透明度为0*/
		100% {
			opacity: 1;
		}

		/*结束状态 透明度为1*/
	}

	@-webkit-keyframes fade-in {

		/*针对webkit内核*/
		0% {
			opacity: 0;
		}

		40% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.recommended {
		animation: fade-in;
		/*动画名称*/
		animation-duration: 1.5s;
		/*动画持续时间*/
		-webkit-animation: fade-in 1.5s;
		/*针对webkit内核*/
	}
	.recommended {
		.card {
			width: 100%;
			height: 80vh;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 0;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			background: #eeeeee;

			.card-item {
				//position: relative;
				background: #ffffff;
				width: 100%;
				height: 22vh;
				//border: 1px solid red;
				margin-top: 20rpx;
				//background-image: linear-gradient(to top right, #f7797d, #fbd786);
				border-radius: 15rpx;
				box-shadow: 0 0 5px 3px #c8c8c8;
				display: flex;
				align-items: center;

				.text1 {
					margin-left: 45rpx;
					font-size: 40rpx;
					margin-top: -25rpx;

					.text {
						font-size: 25rpx;
						color: gray;
					}
				}
			}
		}
	}
</style>
